---
category: Level 2 — Intermediate
created: '2020-03-19'
keywords: addRange, clipboardData, createTextNode, deleteContents, execCommand, getRangeAt, getSelection, get text from clipboard, insertNode, insert text current position, paste plain text, queryCommandSupported removeAllRanges, selectNodeContents
title: Paste as plain text
---

Assume that we have a `contenteditable` element as below:

```html
<div contenteditable id="editor"></div>
```

In order to paste the plain text only in the element, we have to handle the `paste` event:

```js
const editorEle = document.getElementById('editor');

// Handle the `paste` event
editorEle.addEventListener('paste', function (e) {
    // Prevent the default action
    e.preventDefault();

    // Get the copied text from the clipboard
    const text = e.clipboardData
        ? (e.originalEvent || e).clipboardData.getData('text/plain')
        : // For IE
        window.clipboardData
        ? window.clipboardData.getData('Text')
        : '';

    if (document.queryCommandSupported('insertText')) {
        document.execCommand('insertText', false, text);
    } else {
        // Insert text at the current position of caret
        const range = document.getSelection().getRangeAt(0);
        range.deleteContents();

        const textNode = document.createTextNode(text);
        range.insertNode(textNode);
        range.selectNodeContents(textNode);
        range.collapse(false);

        const selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    }
});
```

Try to paste some rich text in the following `contenteditable` element:

## Demo

<Playground>
```html
<div class="container">
    <div contenteditable class="editor" id="editor"></div>
</div>
```

```css
.container {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 2rem;
}
.editor {
    border: 1px solid #cbd5e0;
    height: 16rem;
    overflow: auto;
    width: 100%;
}
```

```js
document.addEventListener('DOMContentLoaded', function () {
    const editorEle = document.getElementById('editor');
    editorEle.addEventListener('paste', function (e) {
        e.preventDefault();

        // Get the copied text from the clipboard
        const text = e.clipboardData
            ? (e.originalEvent || e).clipboardData.getData('text/plain')
            : // For IE
            window.clipboardData
            ? window.clipboardData.getData('Text')
            : '';

        if (document.queryCommandSupported('insertText')) {
            document.execCommand('insertText', false, text);
        } else {
            // Insert text at the current position of caret
            const range = document.getSelection().getRangeAt(0);
            range.deleteContents();

            const textNode = document.createTextNode(text);
            range.insertNode(textNode);
            range.selectNodeContents(textNode);
            range.collapse(false);

            const selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
        }
    });
});
```
</Playground>

## See also

-   [Add a special message when users copy text](https://phuoc.ng/collection/html-dom/add-a-special-message-when-users-copy-text/)
-   [Copy highlighted code to the clipboard](https://phuoc.ng/collection/html-dom/copy-highlighted-code-to-the-clipboard/)
-   [Copy text to the clipboard](https://phuoc.ng/collection/html-dom/copy-text-to-the-clipboard/)
